<template>
	<view>
		<!-- 搜索框 -->
		<uni-nav-bar title="首页" fixed="true" statusBar leftWidth="40rpx" rightWidth="80rpx" class="navBar"
			border="false">
			<block slot="left" class="back">
				<uni-icons type="back" size="20" color="#000" @click="$commonFunc.backPage(1)"></uni-icons>

			</block>
			<view class="input-view">
				<uni-icons class="input-uni-icon" type="search" size="18" color="#999" />
				<input confirm-type="search" class="nav-bar-input" type="text" placeholder="输入搜索关键词"
					v-model="searchParams" @confirm="search" />
			</view>
			<block slot="right">
				<view class="search" @click="search">
					搜索
				</view>
			</block>
		</uni-nav-bar>
		<ms-tabs :list="tabBars" v-model="tabIndex" itemColor="#000" lineColor="#FF7F00" class="tabs">
			<template v-slot:title="{title}">
				<view class="tab-block" v-if="title=='全部'">
					<view>{{title}}</view>
				</view>
				<view class="tab-block" v-else>
					<view>{{title}}</view>
				</view>
			</template>
		</ms-tabs>
		<swiper class="swiper" :current="tabIndex" @change="change">
			<swiper-item>
				<scroll-view scroll-y style="height: 100%;width: 100%;" lower-threshold="30"
					@scrolltolower="scrollLower">
					<view class="swiper0">
						<view class="btn" v-for="(item,index) in paiXu" :class="paiXuParam==item.value?'active':''"
							:key="index" @click="changeIndex(item)">
							{{item.text}}
						</view>
					</view>
					<waterFall v-if="dataList.length > 0" :list="dataList" class="waterFall"></waterFall>
				</scroll-view>

			</swiper-item>
			<swiper-item>
				<scroll-view scroll-y style="height: 100%;width: 100%;" lower-threshold="30"
					@scrolltolower="scrollLowerYonhu">
					<view v-for="(item,index) in yonghuList" :key="index" @click="toPerson(item.uid)">
						<view class="yonghu-item-bg">
							<block v-if="item.avatar">
								<image :src="`${tempUrl}${item.avatar}`" mode="widthFix"></image>
							</block>
							<block v-else>
								<image src="../../static/default/default-avatar.png" mode="widthFix"></image>
							</block>
							
							<view class="yonghu-item-info">
								<view class="nickName">{{item.name}}</view>
								<view>寻糖号:&nbsp;&nbsp;{{item.uid}}</view>
								<!-- <view>关注数&nbsp;·&nbsp;{{item.fansCount}}</view> -->
							</view>
							<!-- <view class="yonghu-item-btn">关注</view> -->
						</view>
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item>
				<scroll-view scroll-y style="height: 100%;width: 100%;z-index: 999;" lower-threshold="30"
					@scrolltolower="scrollLowerGoods">
					<view class="swiper0">
						<!-- <fui-dropdown-menu :size="28" selectedColor="#FF7F00" 
							:options="array" @click="rangeItemClick"
							@close="rangeClose" ref="ddmRange">
							<view class="fui-filter__item" @tap="filterTap" style="z-index: 999;">
								<text>{{range}}</text>
								<view class="fui-filter__icon" :class="{'fui-icon__ani':rangeShow}">
									<fui-icon name="turningdown" :size="32"></fui-icon>
								</view>
							</view>
						</fui-dropdown-menu> -->
						<view class="fui-filter__item">销量</view>
					</view>
					<waterFall v-if="goodsList.length > 0" :list="goodsList" class="waterFall"></waterFall>
				</scroll-view>

			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import waterFall from '../../components/waterFall/index.vue';
	import {
		baseUrl
	} from "@/common/js/request.js"
	import {
		getArticle
	} from "../../api/article.js"
	import {listUsers} from "../../api/userManage.js"
	import {getGoods} from "../../api/good.js"
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		components: {
			waterFall
			// Goods
		},
		data() {
			return {
				tabIndex: 0,
				paiXuParam: 1,
				paiXu: [
					// {
					// 	text: '综合',
					// 	value: 0,
					// },
					{
						text: '最热',
						value: 1,
					}, {
						text: '最新',
						value: 2,
					}
				],
				searchParams: '',
				goodsParam: '',
				priceParam: 1,
				goodsParamValue: [{
						text: '综合排序',
						value: 0,
					},
					{
						text: '销量',
						value: 4,
					}
				],
				range: '综合排序',
				rangeShow: false,
				array: [
					{
						text: '综合排序',
						value: 0,
						checked: true
					},
					{
						text: '价格降序',
						value: 1,
					}, {
						text: '价格升序',
						value: 2,
					}
				],
				tabBars: [{
						title: "全部",
						id: "all",
						order: 0
					},
					{
						title: "用户",
						id: "YongHu",
						order: 1,
					},
					{
						title: "商品",
						id: "Goods",
						order: 2,
					},
				],
				dataList: [{
						coverImg: '3.jpg',
						title: '杭州除了阿里巴巴还有哪些牛气的公司公司公',
						avatarImg: '4.jpg',
						name: '把我的名字读一遍超级长',
						count: 999,
						type: 1
					},
					{
						coverImg: '2.jpg',
						title: '杭州除了阿里巴巴还有哪些牛气的公司公司公',
						avatarImg: '3.jpg',
						name: '把我的名字读一遍超级长',
						count: 999,
						type: 1
					},
					{
						coverImg: '4.jpg',
						title: '杭州除了阿里巴巴还有哪些牛气的公司公司公',
						avatarImg: '3.jpg',
						name: '把我的名字读一遍超级长',
						count: 999,
						type: 1
					}, {
						coverImg: '3.jpg',
						title: '杭州除了阿里巴巴还有哪些牛气的公司公司公',
						avatarImg: '4.jpg',
						name: '把我的名字读一遍超级长',
						count: 999,
						type: 1
					}, {
						coverImg: '1.jpg',
						title: '杭州除了阿里巴巴还有哪些牛气的公司公司公',
						avatarImg: '3.jpg',
						name: '把我的名字读一遍超级长',
						count: 999,
						type: 1
					}
				],
				articleList: [{
						coverImg: '3.jpg',
						title: '杭州除了阿里巴巴还有哪些牛气的公司公司公',
						avatarImg: '4.jpg',
						name: '把我的名字读一遍超级长',
						count: 999,
						type: 1
					},
					{
						coverImg: '2.jpg',
						title: '杭州除了阿里巴巴还有哪些牛气的公司公司公',
						avatarImg: '3.jpg',
						name: '把我的名字读一遍超级长',
						count: 999,
						type: 1
					},
					{
						coverImg: '4.jpg',
						title: '杭州除了阿里巴巴还有哪些牛气的公司公司公',
						avatarImg: '3.jpg',
						name: '把我的名字读一遍超级长',
						count: 999,
						type: 1
					}, {
						coverImg: '3.jpg',
						title: '杭州除了阿里巴巴还有哪些牛气的公司公司公',
						avatarImg: '4.jpg',
						name: '把我的名字读一遍超级长',
						count: 999,
						type: 1
					}, {
						coverImg: '1.jpg',
						title: '杭州除了阿里巴巴还有哪些牛气的公司公司公',
						avatarImg: '3.jpg',
						name: '把我的名字读一遍超级长',
						count: 999,
						type: 1
					}
				],
				yonghuList: [],
				goodsList: [],
				tempUrl: '',
				articleSearch:{
					current:1,
					size:10,
					total: 0
				},
				userSearch:{
					current:1,
					size:10,
					total: 0
				},

				goodSearch:{
					current:1,
					size:10,
					total: 0
				}
			}
		},
		watch:{
			tabIndex(newValue){
				this.restForm()
				this.getData()
			}
		},
		created() {
			this.tempUrl = this.baseUrl
			this.restForm()
			this.getData();
		},
		methods: {
			getData() {
				if(this.tabIndex==0){
					getArticle({
						current: this.articleSearch.current,
						size: this.articleSearch.size,
						type: this.paiXuParam || "",
						title:this.searchParams || "",
						content:this.searchParams||""
					}).then(res => {
						if (res.code == 200) {
							this.articleSearch.total = res.data.total;
							this.articleSearch.current = res.data.current;
							this.dataList = [...this.dataList, ...res.data.records]
						}
					})
				}
				else if(this.tabIndex==1){
					listUsers({
						current: this.userSearch.current,
						size: this.userSearch.size,
						name:this.searchParams||"",
						roleid:3
					}).then(res => {
						if (res.code == 200) {
							this.userSearch.total = res.data.total;
							this.userSearch.current = res.data.current;
							this.yonghuList = [...this.yonghuList, ...res.data.records]
						}
					})
				}else{
					getGoods({
						current: this.goodSearch.current,
						size: this.goodSearch.size,
						gname:this.searchParams||"",
						status:1
					}).then(res=>{
						if(res.code==200){
							this.goodSearch.total = res.data.total;
							this.goodSearch.current = res.data.current;
							this.goodsList = [...this.goodsList , ...res.data.records]
						}
					})
				}
				
				
			},
			//搜索
			toPerson(uid) {
				console.log(uid)
				uni.navigateTo({
					url: `/profile/person/person?data=${uid}`
				})
			},
			search() {
				this.restForm()
				this.getData()
			},
			//文章
			scrollLower() {
				if (this.dataList.length < this.articleSearch.total) {
					this.articleSearch.current++;
					this.getData();
				}
			},
			//用户
			scrollLowerYonhu() {
				if (this.yonghuList.length < this.userSearch.total) {
					this.userSearch.current++;
					this.getData();
				} 
			},
			//商品
			scrollLowerGoods() {
				if (this.goodsList.length < this.goodSearch.total) {
					this.goodSearch.current++;
					this.getData();
				} 
				// if (this.goodsList.length > 29) {
				// 	uni.showToast({
				// 		title: '30条全部加载完毕！',
				// 		icon: 'none'
				// 	});
				// } else {
				// 	this.goodsList = this.goodsList.concat(y2);
				// }
			},
			//最新最热排序
			changeIndex(item) {
				this.paiXuParam = item.value
				this.restForm();
				this.getData();
			},
			//中级标签
			TarData(item) {
				//设置id，来显示选中那个标签，显示下划线
				console.log(item)
				this.tabIndex = item.order;
			},
			//滑动swiper
			change(e) {
				const {
					current
				} = e.detail;
				this.tabIndex = current;
			},
			filterTap() {
				//显示下拉框
				this.$refs.ddmRange.show()
				this.rangeShow = true;
			},
			rangeItemClick(e) {
				console.log(e)
				this.range = e.text
				this.rangeClose()
			},
			rangeClose() {
				this.rangeShow = false;
			},
			restForm(){
				if(this.tabIndex==0){
					this.dataList = [];
					this.articleSearch={
						current:1,
						size:10,
						total: 0
					}
				}else if(this.tabIndex==1){
					this.yonghuList=[]
					this.userSearch={
						current:1,
						size:10,
						total: 0
					}
				}else{
					this.goodsList=[]
					this.goodSearch={
						current:1,
						size:10,
						total: 0
					}
				}
			}

		}
	}
</script>

<style lang="scss" scoped>
	@import url("../../static/css/yonghu.css");

	/deep/.uni-navbar .uni-navbar--border {
		border-bottom: unset;
	}

	$nav-height: 30px;

	.input-view {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		// width: 350rpx;
		flex: 1;
		background-color: #f8f8f8;
		height: $nav-height;
		border-radius: 30rpx;
		padding: 0 40rpx;
		flex-wrap: nowrap;
		margin: 14rpx 0;
		line-height: $nav-height;
	}

	.input-uni-icon {
		line-height: $nav-height;
	}

	.nav-bar-input {
		caret-color: #FF7F00;
		height: $nav-height;
		line-height: $nav-height;
		/* #ifdef APP-PLUS */
		width: 400rpx;
		/* #endif */
		padding: 0 12rpx;
		font-size: 28rpx;
		background-color: #f8f8f8;
	}

	.search {
		font-size: 30rpx;
		color: #999;
		padding-right: 16rpx;
	}

	/deep/.tabBlock .tab {
		display: flex;
		font-size: 30rpx;
		padding-bottom: 15rpx;
		white-space: nowrap;
		border-bottom: 1px #bbb solid !important;
		color: #ddd !important;
	}

	/deep/.tabBlock .tab__item--active {
		color: #000;
		font-weight: 700;
	}

	.swiper {
		overflow-y: auto;
		height: 100vh;
		background-color: #FAFAFA;
	}

	.swiper0 {
		display: flex;
		margin-bottom: 10rpx;
		padding: 10rpx 60rpx 20rpx;
		box-shadow: rgba(27, 31, 35, 0.02) 0px 1px 0px,
			rgba(255, 255, 255, 0.25) 0px 1px 0px inset;

		.btn {
			margin: 0 20rpx;
			padding: 10rpx 15rpx;
			width: 50rpx;
			height: 30rpx;
			// background-color: #EDEDED;
			text-align: center;
			border-radius: 10rpx;
			line-height: 30rpx;
			font-size: 24rpx;
			color: #666;
		}

		.active {
			color: #000;
			font-weight: 700;
			background-color: #EDEDED;
		}

	}

	.fui-filter__item {
		width: 300rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		/* #ifdef H5 */
		cursor: pointer;
		/* #endif */
		background-color: #fff;
	}

	/deep/.fui-dropdown__menu-item {
		width: 300rpx !important;
	}

	.fui-filter__icon {
		transition: all .15s linear;
	}

	.fui-icon__ani {
		transform: rotate(180deg);
	}
</style>
